import React, { lazy, Suspense } from 'react';
import './App.scss';
import { Switch, Route, Redirect } from "react-router-dom"

const Home = lazy(() => import('./pages/home/Index'));
const City = lazy(() => import('./pages/city/Index'));
const Detail = lazy(() => import('./pages/detail/Index'));
const Login=lazy(()=>import('./pages/login/Index'));


const Loading = () => {
  return <div>loading...</div>
}
const App = () => {
  return (
    <Switch>
      <Suspense fallback={<Loading />}>
      <Redirect from="/" to="/home" exact></Redirect>
        <Route path="/home">
          <Home />
        </Route>
        <Route path="/city">
          <City />
        </Route>
        <Route path="/login">
          <Login />
        </Route>
        <Route path="/detail/:id">
          <Detail />
        </Route>
      </Suspense>
    </Switch>
  );
}

export default App;